<template>
    <div class="main">
        <div class="container">
            <div class="center-all step-all alibaba-ico">

                <RouterLink class="item"  
                v-for="(item, index) in arr" :key="index"
                :to="{ path: '/article', query: { id: item.articleId } }">

                    <svg t="1732089593435" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="3052" width="200" height="200">
                        <path
                            d="M512 85.333333c235.648 0 426.666667 191.018667 426.666667 426.666667s-191.018667 426.666667-426.666667 426.666667S85.333333 747.648 85.333333 512 276.352 85.333333 512 85.333333z m0 85.333334C323.477333 170.666667 170.666667 323.477333 170.666667 512s152.810667 341.333333 341.333333 341.333333 341.333333-152.810667 341.333333-341.333333S700.522667 170.666667 512 170.666667z m0 106.666666a21.333333 21.333333 0 0 1 21.333333 21.333334v234.666666h170.666667a21.333333 21.333333 0 0 1 21.333333 21.333334v42.666666a21.333333 21.333333 0 0 1-21.333333 21.333334H469.333333a21.333333 21.333333 0 0 1-21.333333-21.333334V298.666667a21.333333 21.333333 0 0 1 21.333333-21.333334h42.666667z"
                            fill="#222429" p-id="3053"></path>
                    </svg>

                    <p>{{ item.updatedAt }} {{ item.title }} </p>
                </RouterLink>  
          
                
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { instance as http } from '../axios';
import { onMounted, ref } from 'vue';
interface oneArticle {
    articleId: number,
    author: string,
    content: string,
    createdAi: Date,
    description: string,
    title: string,
    updatedAt: Date
}
//使用下面的会不渲染
// let arr: oneArticle[] = reactive(
//     []
// )
let arr = ref<oneArticle[]>([])
onMounted(() => {
    http.get('/article/getArticleList?pageNum=1').then(success => {
        arr.value = success.data.data.data
        console.log(success.data.data.data);//这是一个数组
        console.log(success.data.data.data[0]);//第一个数据
        console.log(arr);
    }).catch(error => {

    })
})
</script>

<style scoped>
.step-all {
    margin-top: 10rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.item {
    margin-bottom: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
}

.item p{
    margin-left: 2rem;
    font-size: large;
}
.item:hover {
    color: rgb(104, 219, 219);
}
</style>